<template>
  <a-modal
    :title="$t('会员补录')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    class="customHeight customHeightChild modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button @click="handleCancel" :loading="confirmLoading">{{$t('关闭')}}</a-button>
      <a-button type="primary" @click="handleOk" :loading="confirmLoading">{{$t('保存')}}</a-button>
    </template>
    <div>
      <a-form-model :model="model" :rules="rules" ref="form">
        <div>
          <div style="font-weight: bold">{{$t('基本信息')}}</div>
          <div style="margin-top: 20px">
            <a-row>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('手机号')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="phone"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.phone" :placeholder="$t('请输入会员手机号')" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('卡号')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="memberCard.chipNo" :placeholder="$t('请输入卡号')" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('证件类型')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <j-search-select-tag
                    :placeholder="$t('请选择')"
                    v-model="model.certType"
                    dict="bis_member.cert_type"
                  ></j-search-select-tag>
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('会员生日')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-date-picker
                    :show-time="false"
                    format="YYYY-MM-DD"
                    class="query-group-cust"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    v-model="model.birthday"
                    style="width: 100%"
                    :placeholder="$t('请输入会员生日')"
                  ></a-date-picker>
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('账户状态')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <j-search-select-tag
                    :placeholder="$t('请选择')"
                    v-model="model.state"
                    dict="bis_member_info.state"
                  ></j-search-select-tag>
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('备注')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.commet" :placeholder="$t('请输入备注')" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('会员姓名')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.name" :placeholder="$t('请输入会员姓名')" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('性别')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-select v-model="model.sex" :placeholder="$t('请选择')">
                    <a-select-option value="0">{{$t('女')}}</a-select-option>
                    <a-select-option value="1">{{$t('男')}}</a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('证件号')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.certno" :placeholder="$t('请输入证件号')" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('会员类型')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="memberType"
                  style="margin-bottom: 15px"
                >
                <a-select v-model="model.memberType" :placeholder="$t('请选择会员类型')">
                  <a-select-option v-for="item in memberTypeList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('注册时间')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                <a-date-picker
                :show-time="true"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请输入会员注册时间')"
                class="query-group-cust"
                v-model="model.regTime"
              ></a-date-picker>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
          <div style="font-weight: bold">{{$t('账户信息')}}</div>
          <div style="margin-top: 20px">
            <a-row>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('代币')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  style="margin-bottom: 15px"
                >
                  <a-input disabled v-model="model.coin" />
                </a-form-model-item>
                <div style="margin-left: 24%; margin-bottom: 10px; color: #e38127">{{$t('代币=真实代币+赠送代币')}}</div>
              </a-col>
              <a-col :span="6">
                <a-form-model-item
                  :label="$t('真实代币')"
                  :labelCol="{ span: 10 }"
                  :wrapperCol="{ span: 13 }"
                  prop="realCoin"
                  style="margin-bottom: 15px"
                >
                  <a-input-number v-model="model.realCoin" @change="getCoin" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item
                  :label="$t('赠送代币')"
                  :labelCol="{ span: 10 }"
                  :wrapperCol="{ span: 13 }"
                  prop="presentCoin"
                  style="margin-bottom: 15px"
                >
                  <a-input-number v-model="model.presentCoin" @change="getCoin" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('积分')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="integral"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.integral" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('彩票')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="lottery"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.lottery" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('A票')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="alottery"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.alottery" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('A币')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="points"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.points" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  :label="$t('成长值')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="growth"
                  style="margin-bottom: 15px"
                >
                  <a-input v-model="model.growth" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form-model>
    </div>
  </a-modal>
</template>
<script>
import { getAction, postAction } from '../../../api/manage'
import moment from 'moment'

export default {
  name: 'MemberCollectionModal',
  data() {
    return {
      width: 800,
      visible: false,
      model: {
        phone:'',
        certType: '1',
        coin: '0',
        realCoin: '0',
        presentCoin: '0',
        integral: '0',
        lottery: '0',
        alottery: '0',
        points: '0',
        growth: '0',
        regTime:undefined,
        memberType:undefined,
        state: '0',
      },
      memberCard: {
        state: '0',
      },
      confirmLoading: false,
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 17,
      },
      rules: {
        phone: [{ required: true, message: this.$t('请输入手机号') }],
        memberType: [{ required: true, message: this.$t('请选择会员类型') }],
        realCoin: [{ pattern: /^\d+.?\d{0,2}$/, message: this.$t('小数点后最多输入两位') }],
        presentCoin: [{ pattern: /^\d+.?\d{0,2}$/, message: this.$t('小数点后最多输入两位') }],
        integral: [{ pattern: /^[+]{0,1}(\d+)$/, message: this.$t('请输入0或正整数') }],
        lottery: [{ pattern: /^[+]{0,1}(\d+)$/, message: this.$t('请输入0或正整数') }],
        alottery: [{ pattern: /^[+]{0,1}(\d+)$/, message: this.$t('请输入0或正整数') }],
        points: [{ pattern: /^\d+.?\d{0,2}$/, message: this.$t('小数点后最多输入两位') }],
        growth: [{ pattern: /^[+]{0,1}(\d+)$/, message: this.$t('请输入0或正整数') }],
      },
      memberTypeList:[],
    }
  },
  methods: {
    edit() {
      this.visible = true
      this.model = {
        phone:'',
        name:'',
        sex:undefined,
        certType: '1',
        certno:'',
        birthday:'',
        memberType:undefined,
        regTime:'',
        commet:'',
        coin: '0',
        realCoin: '0',
        presentCoin: '0',
        integral: '0',
        lottery: '0',
        alottery: '0',
        points: '0',
        growth: '0',
        regTime:undefined,
        state:'0',
      },
      this.memberCard = {
        chipNo:'',
        state: '0',
      },
      this.memberTypeList = []
      this.model.regTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      getAction('/member/bisMemberRule/list').then(res=>{
        if(res.success){
          res.result.records.forEach(col => {
            if(col.code != "N"){
              this.memberTypeList.push(col)
            }
          });
        }
      })
    },
    getCoin() {
      this.memberAccount.coin = parseFloat(this.memberAccount.presentCoin) + parseFloat(this.memberAccount.realCoin)
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let query = {}
          let memberAccount = {}
          query = this.model
          query.memberCard = this.memberCard
          memberAccount.memberType = this.model.memberType
          memberAccount.alottery = this.model.alottery
          memberAccount.growth = this.model.growth
          memberAccount.integral = this.model.integral
          memberAccount.lottery = this.model.lottery
          memberAccount.points = this.model.points
          memberAccount.presentCoin = this.model.presentCoin
          memberAccount.realCoin = this.model.realCoin
          memberAccount.state = this.model.state,
          query.memberAccount = memberAccount
          this.confirmLoading = true
          postAction('/member/bisMemberInfo/makeUp', query)
            .then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.warning(res.message)
              }
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>